<script>
  import { Checkbox } from "@ark-ui/svelte";
  import { CheckIcon } from "lucide-svelte";
</script>

<Checkbox.Root class="flex items-center gap-3 cursor-pointer">
  <Checkbox.Control
    class="w-5 h-5 bg-white border-2 border-gray-300 rounded data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-hover:border-gray-400 dark:bg-gray-900 dark:border-gray-600 dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-blue-500 dark:data-hover:border-gray-400 transition-all duration-200 flex items-center justify-center"
  >
    <Checkbox.Indicator>
      <CheckIcon class="w-3.5 h-3.5 text-white" />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.Label
    class="text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
  >
    Accept terms and conditions
  </Checkbox.Label>
  <Checkbox.HiddenInput />
</Checkbox.Root>
